<template>
  <div class="help-container">
    <a-card class="help-card">
      <template #title>
        <div class="help-header">
          <h1>帮助中心</h1>
          <a-button type="primary" @click="$router.push('/')">返回登录</a-button>
        </div>
      </template>
      
      <div class="help-content">
        <section class="help-section">
          <h2>1. 账号相关</h2>
          <h3>1.1 如何注册账号？</h3>
          <p>点击登录页面的"立即注册"按钮，填写学号、姓名、邮箱等信息即可完成注册。</p>
          
          <h3>1.2 忘记密码怎么办？</h3>
          <p>点击登录页面的"忘记密码"链接，通过学号和注册邮箱验证身份后可重置密码。</p>
        </section>

        <section class="help-section">
          <h2>2. OJ练习</h2>
          <h3>2.1 如何开始练习？</h3>
          <p>登录后进入OJ练习页面，选择题目开始编程练习。</p>
          
          <h3>2.2 支持哪些编程语言？</h3>
          <p>目前支持C、C++、Java、Python等主流编程语言。</p>
        </section>

        <section class="help-section">
          <h2>3. 项目实践</h2>
          <h3>3.1 如何参与项目？</h3>
          <p>在项目实践页面选择感兴趣的项目，按要求提交相关材料即可参与。</p>
          
          <h3>3.2 如何提交项目成果？</h3>
          <p>在项目管理页面上传项目文档和代码，经教师审核后完成提交。</p>
        </section>

        <section class="help-section">
          <h2>4. 联系我们</h2>
          <div class="contact-info">
            <p>邮箱：support@example.com</p>
            <p>电话：029-12345678</p>
            <p>地址：西安市雁塔区西安欧亚学院</p>
          </div>
        </section>
      </div>
    </a-card>
  </div>
</template>

<script>
export default {
  name: 'Help'
}
</script>

<style scoped>
.help-container {
  padding: 24px;
  background: #f0f2f5;
  min-height: 100vh;
}

.help-card {
  max-width: 800px;
  margin: 0 auto;
}

.help-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.help-header h1 {
  margin: 0;
}

.help-section {
  margin-bottom: 32px;
}

.help-section h2 {
  color: #1890ff;
  margin-bottom: 16px;
}

.help-section h3 {
  color: #1a1a1a;
  margin: 16px 0;
}

.help-section p {
  color: #666;
  line-height: 1.6;
  margin-bottom: 12px;
}

.contact-info {
  background: #f8f9fa;
  padding: 16px;
  border-radius: 4px;
}

.contact-info p {
  margin: 8px 0;
}
</style>
